<template>
	<view class="MssageList" v-if="mssageShow">
		<view class="Mssage_title_first" v-if="!listshow">
			<text class="first_title" @click="showClick()">{{mssageInfo.list[0].title}}</text>
			<view class="first_right">
				<text class="first_number" style="" @click="showClick()">{{mssageInfo.cut}}</text>
			</view>
		</view>
		<scroll-view class="MssageList_wp" :scroll-y="true" v-if="listshow">
			<view class="Mssage_title" @click="showClick()">
				<text class="title" >您有{{mssageInfo.cut}}个未支付订单</text>
				<text class="more">∧</text>
			</view>
			<view class="Mssage_order" v-if="listshow">
				<view class="order_title" v-for="(item,index) in mssageInfo.list">
					<text class="order_title_cont">{{item.title}}</text>
					<view class="order_button">
						<text class="button" @click="gopay(item.id)">去支付</text>
					</view>

				</view>
			</view>
		</scroll-view>
	</view>


</template>

<script>
	export default {
		name: 'MssageList',
		props: {
			mssageShow: {
				type: Boolean,
				default: true
			},
			mssageInfo: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				listshow: false,
			}
		},
		methods: {
			showClick() {
				this.listshow = !this.listshow;
			},
			close() {
				this.$emit('update:mssageShow', false)
			},
			gopay(e) {
				this.$emit('massageGoclick', e)
			}
		}
	}
</script>

<style lang="scss">
	.MssageList {
		font-size: 28upx;
	}

	.Mssage_title_first {
		background-color: rgba(220, 255, 255, 0.7);
		border-radius: 20upx;
		display: flex;
		align-items: center;

	}

	.first_title {
		max-height: 72upx;
		line-height: 36upx;
		overflow: hidden;
		flex: 5;
		font-size: 26upx;
	}

	.first_right {
		border-left: 1px #333 solid;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 2;
		margin-left: 30upx;
		height: 92upx;
	}

	.first_number {
		background-color: #0062CC;
		border-radius: 4px;
		color: #f00;
		padding: 6upx 10upx;
	}

	.MssageList_wp {
		background-color: rgba(220, 255, 255, 0.7);
		border-radius: 20px;
		padding: 0 20upx 10px 20upx;
		max-height: 528upx;
		width: 100%;
	}

	.Mssage_title {
		display: flex;
		align-items: center;
		text-align: center;
		height: 72upx;
	}

	.title {
		flex: 1;
		max-height: 72upx;
		line-height: 36upx;
		overflow: hidden;
	}

	.more {
		color: #666;
		font-size: 18px;
		transform: translateY(-4px);
		padding-right: 25px;
	}

	.order_title {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding-bottom: 10px;
	}

	.order_title_cont {
		flex: 4;
		max-height: 72upx;
		line-height: 36upx;
		overflow: hidden;
	}

	.order_button {
		flex: 1;
		text-align: center;
	}


	.button {
		background-color: $base-color;
		border-radius: 6px;
		color: #fff;
		padding: 6upx 10upx;
	}
</style>
